<template>
	<view class="loglist-page">
		<view class="flex flex-column text-center p-3  mb-2 top-box">
			<text class="text-white mb-2">余额</text>
			<text class="text-white fs-40 font-weight-bold">{{currentBalance}}</text>
		</view>
		<block v-for="(item,index) in logList" :key="index">
			<view class="rounded bg-white p-2 mx-2 mb-2 fs-28">
				<view class="flex align-center justify-between border-bottom pb-2">
					<text class="ft666666">变动类型</text>
					<text>{{item.type_text}}</text>
				</view>
				<view class="flex align-center justify-between">
					<text class="ft666666">变更金额</text>
					<text>{{item.money}}</text>
				</view>
				<view class="flex align-center justify-between">
					<text class="ft666666">变更前余额</text>
					<text>{{item.before}}</text>
				</view>
				<view class="flex align-center justify-between">
					<text class="ft666666">变更后余额</text>
					<text>{{item.after}}</text>
				</view>
				<view class="flex align-center justify-between">
					<text class="ft666666">备注说明</text>
					<text>{{item.memo}}</text>
				</view>
				<view class="flex align-center justify-between">
					<text class="ft666666">创建时间</text>
					<text>{{item.create_time}}</text>
				</view>
			</view>
		</block>
		<u-empty v-if="logList.length == 0"></u-empty>

		<view style="height: 40px;"></view>
	</view>
</template>

<script>
	import {
		moneyLogList
	} from '@/api/store.js'
	export default {
		data() {
			return {
				logList: [],
				page: 1,
				tmpList: [],
				currentBalance: 0
			}
		},
		created() {
			this.moneyLogList()
		},
		onReachBottom() {
			if (this.tmpList.length < 10) return
			this.page++;
			this.moneyLogList()
		},
		methods: {
			moneyLogList() {
				const data = {
					page: this.page,
					limit: 10
				}
				moneyLogList(data).then(res => {
					const list = res.data.list
					this.tmpList = list
					this.currentBalance = res.data.current_balance
					if (this.page == 1) {
						this.logList = list
					} else {
						this.logList = this.logList.concat(list)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loglist-page {
		background-image: url('/static/bg1.png');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center -50px;
	}
</style>